<template>
	<div class="app-main-content-box">
		<!-- 表格 -->
		<div class="table_box">
			<el-table :data="tableData" :header-cell-style="{ 'text-align': 'center' }" :cell-style="{ 'text-align': 'center' }" border style="width: 100%;">
				<el-table-column prop="merchName" label="商户名称" />
				<el-table-column prop="merchPhone" label="联系电话" />
				<el-table-column prop="address" label="商户总部地址" />
				<el-table-column prop="financingParty" label="出资方">
					<template slot="header" slot-scope="scope">
						<span>出资方</span>
						<!-- <el-tooltip popper-class="el-tooltip-theme-fresh" placement="top" effect="light">
							<div slot="content">出资方指优惠折扣或活动优惠的钱由谁承担</div>
							<i class="el-icon-question" />
						</el-tooltip> -->
					</template>
					<template slot-scope="scope">
						<div v-if="scope.row.financingParty">
							<p>
								{{ scope.row.financingParty == 1 ? '本商户' : '合作商户'
								}}{{
									scope.row.needAgree == 1 && scope.row.financingParty == 1
										? '（需要同意）'
										: scope.row.needAgree == 0 && scope.row.financingParty == 1
										? '（不需要同意）'
										: ''
								}}
							</p>
						</div>
						<p v-else>无</p>
					</template>
				</el-table-column>
				<el-table-column prop="status" label="参与状态">
					<template slot="header" slot-scope="scope">
						<span>参与状态</span>
					</template>
					<template slot-scope="scope">
						<p>{{ scope.row.status }}</p>
						<p v-if="scope.row.needAgree == 0 && scope.row.financingParty == 1" style="color: red;">【系统自动参与】</p>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<!-- 分页 -->
		<pagination-direction v-if="paginationConfig.total !== 0" :config="paginationConfig" @sizeschange="sizesChange" @pagechange="pageChange" />
	</div>
</template>

<script>
import { getQueryEnrollmentData } from '@/api/coupon';
export default {
	props: {
		couponBase: {
			require: true,
			type: Object
		}
	},
	data() {
		return {
			// 分页配置
			paginationConfig: {
				direction: 'center', // 分页位置
				layout: 'total, sizes, prev, pager, next, jumper', // 分页类型
				pageSizes: [10, 20], // 分页pages
				total: 0,
				page: 1, // 页数-默认1
				pageSize: 10 // 每页条数-默认10
			},
			/* 表格 */
			tableData: []
		};
	},
	mounted() {
		this.getQueryEnrollmentDataFun();
	},
	methods: {
		getQueryEnrollmentDataFun() {
			let { id, belongMerchant } = this.couponBase;
			let params = {
				couponId: id, //优惠券id
				merchant: belongMerchant, //商户id
				page: this.paginationConfig.page, //页数
				pageSize: this.paginationConfig.pageSize //每页显示数量
			};
			getQueryEnrollmentData(params).then(res => {
				console.log('报名数据', res);
				if (res.code == 0) {
					this.paginationConfig.total = res.data.total;
					const data = res.data.list;
					const tableData = [];
					data.forEach(el => {
						const dataItem = {
							merchName: el.cooperateName,
							merchPhone: el.cooperatePhone,
							address: el.cooperateCoreAddress,
							financingParty: el.financingParty,
							needAgree: el.needAgree,
							status: el.participationStatus == 1 ? '未处理' : el.participationStatus == 2 ? '已参与' : '已拒绝'
						};
						tableData.push(dataItem);
					});
					this.tableData = tableData;
				}
			});
		},

		// 分页sizes改变
		sizesChange(e) {
			this.getQueryEnrollmentDataFun();
		},

		// 分页page改变
		pageChange(e) {
			this.getQueryEnrollmentDataFun();
		}
	}
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped></style>
